//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：index.js
// 创建时间：2016年07月03日
// 创建人员：Panda
// 功能说明：CheckBox组件
//################################

'use strict';

import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    Image,
    View,
    TouchableHighlight,
    Text,
    InteractionManager,
} from 'react-native';

class CheckBox extends Component {
    static propTypes = {
		label: PropTypes.string,
        labelStyle: PropTypes.object,
        checked: PropTypes.bool,
        onChange: PropTypes.func
	}

    static defaultProps = {
		label: '',
        labelBefore: false,
        checked: false
    }

    constructor(props) {
        super(props);

        this.state = {
			checked: this.props.checked
		};
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            checked: nextProps.checked,
        });
    }
    

    onChange() {
        InteractionManager.runAfterInteractions(() => {
            this.setState({
                checked: !this.state.checked,
            });

            if(this.props.onChange){
                this.props.onChange(this.state.checked);
            }
        });
  	}

    render() {
		var source = this.state.checked ? require('./checkbox-enable.png') : require('./checkbox-disable.png');

	    var container = (
            <View style={[styles.container, this.props.style]}>
                <Image
                    style={styles.checkbox}
                    source={source}
                    resizeMode={Image.resizeMode.contain} />
                <View style={styles.labelContainer}>
                    <Text style={[styles.label, this.props.labelStyle]}>{this.props.label}</Text>
                </View>
            </View>
        );

        if (this.props.labelBefore) {
            container = (
                <View style={[styles.container, this.props.style]}>
                    <View style={styles.labelContainer}>
                        <Text style={[styles.label, this.props.labelStyle]}>{this.props.label}</Text>
                    </View>
                    <Image
                        style={styles.checkbox}
                        source={source}
                        resizeMode={Image.resizeMode.contain} />
                </View>
            );
        }

        return (
            <TouchableHighlight onPress={this.onChange.bind(this)} underlayColor='white' disabled={this.props.disabled}>
                {container}
            </TouchableHighlight>
        )
	}
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    checkbox: {
        width: 24,
        height: 24,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    labelContainer: {
        marginLeft: 10,
        marginRight: 10,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    label: {
        // flex: 1,
        fontSize: 15,
        lineHeight: 15,
        color: 'grey',
        textAlign: 'center',
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    }
});

export default CheckBox;